Cree un Mini-Juego de Telegram en Unity

Esta guía cubre la creación de un juego para Telegram usando el SDK de Unity de Sequence.

Esta guía le llevará paso a paso para configurar su mini-app o juego de Telegram usando el SDK de Unity de Sequence, habilitando funcionalidad web3 en cadenas EVM para sus usuarios, ya sea mediante métodos de autenticación por correo electrónico o como invitado.

Desarrollaremos la lógica del juego en Unity, pero para desplegarlo como un Mini-Juego de Telegram, empaquetaremos la compilación WebGL dentro de un proyecto React.

Configure su bot de Telegram

1. Cree un Bot de Telegram con BotFather

   1. Abra Telegram y busque “@BotFather”
   2. Inicie una conversación haciendo clic en “Start” o escribiendo /start
   3. Cree un nuevo bot escribiendo /newbot
   4. Siga las indicaciones:

   • Ingrese un nombre para su bot
   • Elija un nombre de usuario (debe terminar en ‘bot’)
2. Obtenga los tokens requeridos

   Después de crear su bot, BotFather le proporcionará:

   • Token del Bot (HTTP API Token)
   • Nombre de usuario del Bot

   Guarde estas credenciales; las necesitará para los siguientes pasos.

Prepare su proyecto Unity WebGL

1. Instale el SDK de Unity de Sequence

   Utilice una de nuestras opciones recomendadas de instalación para su proyecto existente o use nuestro Unity Boilerplate si desea comenzar un proyecto desde cero.

2. Interfaz para diseños móviles

   Asegúrese de que la interfaz de su juego esté optimizada para relaciones de aspecto móviles. Recomendamos usar el Device Simulator para Unity. Además, asegúrese de que el manejo de entradas esté configurado para controles táctiles.

3. Configure la plantilla React de Sequence para WebGL

   El SDK de Unity de Sequence incluye una plantilla WebGL para exportar como un proyecto React. Copie la carpeta WebGLTemplates desde Packages/Sequence Embedded Wallet SDK/ a su directorio Assets/ del proyecto. Vaya a Project Settings -> Player -> WebGL -> Resolution and Presentation y seleccione la plantilla SequenceReact.

4. Configuración de Cloudflare

   Dentro del directorio raíz del proyecto React, cree un archivo wrangler.toml e incluya el siguiente contenido.

   name = "telegrambot"
   compatibility_date = "2024-03-25"
   pages_build_output_dir = "./dist"
   [vars]
   BOT_TOKEN = "GET_YOUR_BOT_TOKEN_FROM_BOTFATHER"
   BOT_SECRET = "can_be_any_long_random_string_abc123_do_not_share"
   
   [dev]
   port = 4444
   

5. Compile su juego WebGL como un proyecto React

   Abra el directorio raíz de su proyecto React en una CLI o en un IDE como Visual Studio Code, y ejecute el siguiente comando para probar su juego en el navegador.

   pnpm install
   pnpm run dev
   

Despliegue su Mini-Juego de Telegram

1. Autentíquese con la cuenta de Cloudflare

   Desde el directorio raíz del proyecto React, despliegue la aplicación y la lógica de funciones en Cloudflare.

   1. Ejecute pnpm wrangler pages deploy

   Esto le pedirá autenticarse con Cloudflare si aún no ha iniciado sesión. Al completar el despliegue, copie la URL donde ahora está alojada su aplicación.

2. Registre el Webhook con Telegram

   Ahora llamamos a nuestro endpoint registerWebhook en nuestra app para registrar la función webhook con la URL de su aplicación desplegada y habilitar el acceso para la API de Telegram.

   curl -X POST \
        "<YOUR_CLOUDFLARE_DEPLOYED_URL>/api/registerWebhook"
   

3. Actualice los orígenes permitidos

   Asegúrese en Sequence Builder de que la configuración de su wallet incluya la URL de su aplicación desplegada como un origen permitido.

¡Pruebe su juego de Telegram!

Envíe un mensaje a su bot en Telegram y verifique si responde. ¡Debería contestarle con la opción de compartir, jugar u obtener más información sobre el bot.